<template>
  <el-container class="box">
    <el-header class="header">
      <el-menu mode="horizontal" :ellipsis="false" background-color="#224B8F" text-color="#fff"
        active-text-color="#fff">
        <el-menu-item index="1">
          <img class="logo" src="../assets/logo.png" alt="">
          <img class="title" src="../assets/logo.png" alt="">
        </el-menu-item>
        <div class="flex-grow" />
        <el-sub-menu index="2">
          <template #title>
            <img class="headImg" src="../assets/logo.png" alt="">
            &emsp;{{username}}
          </template>
          <el-menu-item index="2-1">修改信息</el-menu-item>
          <el-menu-item index="2-2" @click="logout">退出登录</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-header>
  <el-container>r
      <el-aside :width="isCollapse ? '64px' : '180px'">
        <el-menu 
          class="leftMenu" 
          :default-active="store.state.activePath.path" 
          :collapse="isCollapse"
          active-text-color="#20A0FF" 
          background-color="#324057" 
          text-color="#BFC6E1"
          :router="true"
        >
      
          <div class="collapse_handle " @click="isCollapse=!isCollapse">
            <el-icon v-if="isCollapse">
              <Expand />
            </el-icon>
            <el-icon v-else>
              <Fold />
            </el-icon>
            <span >折叠菜单</span>
          </div>
          <el-sub-menu v-for="item in menus" :index="item.order+''" :key="item.id" >
            <template #title>
              <el-icon>
                <component :is="iconsObj[item.id]"></component>
              </el-icon>
              <span>{{item.authName}}</span>
            </template>
            <el-menu-item v-for="child in item.children" :index="'/'+child.path" :key="child.id"  @click="updatePath('/' + child.path, item.authName, child.authName)">{{child.authName}}</el-menu-item>
          </el-sub-menu>
          <div class="collapse_handle" @click="logout">
            <el-icon>
              <Edit />
            </el-icon>
            <span v-if="!isCollapse">退出登录</span>
          </div>
        </el-menu>
      </el-aside>
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ store.state.activePath.name1 }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ store.state.activePath.name2 }}</el-breadcrumb-item>
        </el-breadcrumb>S
        <el-card>
          <router-view></router-view>
        </el-card>

      </el-main>
    </el-container>
  </el-container>
</template>
<script setup>
  import {
    ElContainer, ElHeader, ElAside, ElMain,
    ElMenu, ElMenuItem, ElSubMenu, ElMenuItemGroup,
    ElIcon, 
    ElMessage,
    ElBreadcrumb, ElBreadcrumbItem,
    ElCard
  } from "element-plus"
  import { 
    User, 
    Goods, 
    Fold, 
    Expand, 
    TakeawayBox, 
    DataLine, 
    SetUp, 
    Edit 
  } from '@element-plus/icons-vue'
  import { caidanlb } from "@/tools/ajax.js"
  import { ref, reactive } from "vue"
  import { useStore } from "vuex"
  const store = useStore()
  const username = store.state.username || "用户名"
  const isCollapse = ref(false)
  const menus = reactive([])
  caidanlb().then(res=>{
    console.log(res);
    menus.push(...res.data)
  })
  const iconsObj = {
    125: <User/>,
    103: <SetUp/>,
    101: <Goods/>,
    102: <TakeawayBox/>,
    145: <DataLine/>
  }
  function logout(){
    sessionStorage.clear()
    ElMessage.success("安全退出")
    setTimeout(() => {
      location.reload()
    }, 800);
  }
  function updatePath(path, name1, name2){
    store.commit('setPath', {path, name1, name2})
  }
</script>

<style scoped lang="scss">
  .box {
    height: 100vh;
    overflow: hidden;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .header {
    padding: 0;
    .el-menu-item {
      height: 60px;
    }
    .logo {
      height: 30px;
    }
    .title {
      height: 40px;
      position: relative;
      left: -20px;
    }
    .headImg {
      width: 30px;
      border-radius: 50%;
    }
    .el-menu-item.is-active {
      border-bottom-color: transparent;
      background-color: #224B8F;
    }
  }
  
  .el-aside {
    transition: 0.5s ease-out 0.4s;

    .leftMenu {
      height: calc(100vh - 60px);
      overflow-y: auto;
      overflow-x: hidden;

      .collapse_handle{
        height: 56px;
        color: #BFC6E1;
        line-height: 56px;
        padding: 0 20px;
        text-align: left;
        cursor: pointer;
        overflow: hidden;

        .el-icon{
          margin: 0 5px;
          width: 18px; 
          height: 18px;
          vertical-align: middle;
        }
      }
      .collapse_handle:hover{
        background-color: #283346;
      }
      .el-sub-menu .el-menu-item{
        background-color: #283346;
        height: 46px;
      }
      .el-sub-menu .el-menu-item:hover,
      .el-sub-menu .el-menu-item.is-active{
        background-color: rgb(58, 95, 138);
      }
    }
  }

  .el-main{
    background-color: rgb(223, 229, 230);

    .el-card{
      margin-top: 20px;
      height: calc(100% - 40px);
    }
  }
</style>